import React, { forwardRef } from 'react';
import './index.scss';

export interface FloorNavigationItem {
  id: string;
  text: string;
  isActive?: boolean;
  onClick?: () => void;
}

export interface FloorNavigationProps {
  width?: string | number;
  height?: string | number;
  backgroundImage?: string;
  backgroundColor?: string;
  iconPath?: string;
  iconText?: string;
  items?: FloorNavigationItem[];
  textColor?: string;
  fontSize?: number;
  fontFamily?: string;
  fontWeight?: string | number;
  letterSpacing?: string;
  lineHeight?: string;
  itemSpacing?: number;
  showIcon?: boolean;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onItemClick?: (item: FloorNavigationItem, index: number) => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const FloorNavigation = forwardRef<HTMLDivElement, FloorNavigationProps>(({
                                                                            width = 725,
                                                                            height = 64,
                                                                            backgroundImage = 'http://localhost:8085/static/images/shouye/jxbf21.png',
                                                                            backgroundColor = 'rgba(0, 0, 0, 0.5)',
                                                                            iconPath = 'http://localhost:8085/static/images/shouye/jxbf21.png',
                                                                            iconText = '总览',
                                                                            textColor = 'rgba(255, 255, 255, 0.8)',
                                                                            fontSize = 20,
                                                                            fontFamily = 'SourceHanSansSC',
                                                                            fontWeight = 500,
                                                                            letterSpacing = '1.43px',
                                                                            lineHeight = '29px',
                                                                            itemSpacing = 56,
                                                                            showIcon = true,
                                                                            theme = 'dark',
                                                                            style = {},
                                                                            className = '',
                                                                            onItemClick,
                                                                            __designMode,
                                                                            componentId,
                                                                            _componentName,
                                                                            forwardRef: forwardRefProp,
                                                                            ...otherProps
                                                                          }, ref) => {

  const items =[
      { id: '1', text: '2F夹层', isActive: false },
      { id: '2', text: '2F', isActive: false },
      { id: '3', text: '1F', isActive: false },
      { id: '4', text: 'G', isActive: false },
      { id: '5', text: '-1F', isActive: true },
      { id: '6', text: '-2F', isActive: false },
      { id: '7', text: '-3F', isActive: false },
    ]

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    backgroundColor,
    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    display: 'flex',
    alignItems: 'center',
    padding: '0 20px',
    ...style
  };

  const textStyle: React.CSSProperties = {
    color: textColor,
    fontSize: `${fontSize}px`,
    fontFamily,
    fontWeight,
    letterSpacing,
    lineHeight,
    whiteSpace: 'nowrap'
  };

  const handleItemClick = (item: FloorNavigationItem, index: number) => {
    item.onClick?.();
    onItemClick?.(item, index);
  };

  return (
    <div
      ref={ref}
      className={`floor-navigation ${theme} ${className}`.trim()}
      style={componentStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {showIcon && (
        <div className="icon-section" style={{ display: 'flex', alignItems: 'center', marginRight: '40px' }}>
          <span style={textStyle}>{iconText}</span>
        </div>
      )}

      <div
        className="nav-items"
        style={{ display: 'flex', gap: `${itemSpacing}px`, alignItems: 'center' }}
      >
        {items.map((item, index) => (
          <div
            key={item.id}
            className={`nav-item ${item.isActive ? 'active' : ''}`}
            onClick={() => handleItemClick(item, index)}
            style={textStyle}
          >
            {item.text}
          </div>
        ))}
      </div>
    </div>
  );
});

FloorNavigation.displayName = 'FloorNavigation';

export default FloorNavigation;
